<template>
  <div class="main">
    <!-- 是好友，可查看 -->
    <div class="container" v-show="friendMessageIsNull === false">
      <!-- 顶部信息卡片 -->
      <div class="card upper-part">
        <el-image
          :src="friendMessage.avatar"
          :alt="friendMessage.name || friendMessage.nickname"
          class="avatar"
        ></el-image>

        <div class="message">
          <div class="name-section">
            <span class="name">
              {{
              friendMessage.name || friendMessage.nickname
              }}
            </span>
            <div class="name-actions">
              <span
                :class="{
                  man: friendMessage.gender === 1,
                  woman: friendMessage.gender === 0,
                }"
                :title="friendMessage.gender === 1 ? '男' : '女'"
              >
                <i class="el-icon-s-custom"></i>
              </span>
              <span v-if="friendMessage.isStar === 1" class="star-icon" title="星标朋友">
                <i class="el-icon-star-on"></i>
              </span>
            </div>
          </div>

          <div class="base-info">
            <div>
              <span class="label">昵称：</span>
              <span>{{ friendMessage.nickname }}</span>
            </div>
            <div>
              <span class="label">登入名：</span>
              <span>{{ friendMessage.username }}</span>
            </div>
            <div>
              <span class="label">地区：</span>
              <span>{{ friendMessage.address || "未设置" }}</span>
            </div>
          </div>
        </div>

        <div class="tool-icon">
          <span
            @click.prevent="poolClick(friendMessage.friendId, $event)"
            class="el-icon-more tool"
            title="更多操作"
          ></span>
        </div>
      </div>

      <el-divider class="custom-divider"></el-divider>

      <!-- 中间信息区域 -->
      <div class="card medium-part">
        <div class="info-item" @mouseenter="handleMouseEnter(1)" @mouseleave="handleMouseLeave(1)">
          <span class="item-name">备注</span>
          <p class="text-ellipsis">{{ friendMessage.remark || "未设置" }}</p>
          <span @click.prevent="openRemarkDialog" class="edit-icon" v-show="editShow1">
            <i class="el-icon-edit-outline"></i>
          </span>
        </div>

        <div class="info-item" @mouseenter="handleMouseEnter(2)" @mouseleave="handleMouseLeave(2)">
          <span class="item-name">标签</span>
          <p class="text-ellipsis">{{ friendMessage.label || "未设置" }}</p>
          <span @click.prevent="openRemarkDialog" class="edit-icon" v-show="editShow2">
            <i class="el-icon-edit-outline"></i>
          </span>
        </div>

        <div class="info-item" @mouseenter="handleMouseEnter(3)" @mouseleave="handleMouseLeave(3)">
          <span class="item-name">描述</span>
          <p class="text-ellipsis">{{ friendMessage.description || "未设置" }}</p>
          <span @click.prevent="openRemarkDialog" class="edit-icon" v-show="editShow3">
            <i class="el-icon-edit-outline"></i>
          </span>
        </div>
      </div>

      <el-divider class="custom-divider"></el-divider>

      <!-- 底部操作区域 -->
      <div class="bottom-actions">
        <div class="action-button" @click="sendMsg(friendMessage)">
          <div class="action-icon">
            <i class="el-icon-chat-round"></i>
          </div>
          <div class="action-text">发消息</div>
        </div>

        <div class="action-button" @click="startCall('voice')">
          <div class="action-icon">
            <i class="el-icon-phone-outline"></i>
          </div>
          <div class="action-text">语音通话</div>
        </div>

        <div class="action-button" @click="startCall('video')">
          <div class="action-icon">
            <i class="el-icon-video-camera"></i>
          </div>
          <div class="action-text">视频通话</div>
        </div>
      </div>
    </div>

    <!-- 不是好友不可查看 -->
    <div class="container" v-show="friendMessageIsNull === true">
      <div class="non-friend-card">
        <div class="empty-avatar">
          <i class="el-icon-user"></i>
        </div>

        <div class="non-friend-message">对方已将您删除，请先添加对方后查看</div>

        <div class="add-friend-btn" @click="sendFriendCheck">进行好友验证？</div>

        <div class="tips">
          <span class="tips-title">温馨提示：</span>
          <ul class="tips-list">
            <li>
              1.
              对方与您不是好友关系，需进行好友验证成功后才能查看对方信息或与对方进行聊天。
            </li>
            <li>2. 只有对方同意您的好友请求后才能成为好友关系。</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 加载过程 -->
    <div class="container loading-state" v-show="friendMessageIsNull === null">
      <div class="loading-content" v-loading="friendMessageIsNull === null">
        <i class="el-icon-loading"></i>
        <span class="loading-text">加载中...</span>
      </div>
    </div>

    <!-- 操作菜单浮层 -->
    <div
      v-show="poolClickView"
      class="pool-float-window"
      :style="{ left: `${px}px`, top: `${py}px` }"
    >
      <div class="poolChick">
        <div class="opear">
          <div class="detail" @click="openRemarkDialog">设置备注和标签</div>
          <div
            class="detail border-bottom-light"
            @click="recommend(friendMessage.friendId)"
          >
            <span>
              分享
              <span v-if="friendMessage.gender === 1">他</span>
              <span v-else>她</span>的名片
            </span>
          </div>
          <div class="detail border-bottom-light">
            <span v-if="friendMessage.isStar === 0" @click.prevent="setFriendStar(1)">设置星标朋友</span>
            <span v-if="friendMessage.isStar === 1" @click.prevent="setFriendStar(0)">取消星标朋友</span>
          </div>
          <div class="detail" @click="addBlacklist(friendMessage.friendId)">加入黑名单</div>
          <div
            class="detail border-bottom-light"
            @click="complaints(friendMessage)"
          >投诉</div>
          <div class="detail danger" @click="delFriend(friendMessage.friendId)">删除联系人</div>
        </div>
      </div>
    </div>

    <!-- 设置备注和标签对话框 -->
    <div class="form">
      <el-dialog
        title="设置备注和标签"
        :before-close="handleClose"
        :visible.sync="remarkView"
        width="350px"
        center
        class="custom-dialog"
      >
        <el-form ref="form" label-position="top" :model="form" label-width="80px">
          <el-form-item>
            <span slot="label">备注名</span>
            <el-input size="small" placeholder="备注名" v-model="form.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">标签</span>
            <el-select
              class="full-width"
              v-model="form.label"
              multiple
              filterable
              size="small"
              suffix-icon="el-icon-arrow-right"
              allow-create
              default-first-option
              placeholder="选择标签"
            >
              <el-option
                v-for="(item, index) in labelOptions"
                :key="index"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">描述</span>
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.description"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="cancelConfirmUpdate">取 消</el-button>
          <el-button type="primary" @click="confirmUpdate()">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 投诉对话框 -->
    <div class="complaints">
      <el-dialog
        title="请填写投诉信息"
        :visible.sync="complaintsVisible"
        width="400px"
        center
        :before-close="complaintsHandleClose"
        class="custom-dialog"
      >
        <Complaints @complaintsFinish="complaintsFinish" ref="complaints" />
      </el-dialog>
    </div>

    <!-- 好友推荐对话框 -->
    <div>
      <el-dialog
        title="选择推荐的好友"
        width="400px"
        :visible.sync="referFriendVisible"
        :before-close="referFriendClose"
        center
        class="custom-dialog"
      >
        <ReferFriend
          :recommendFriendId="recommendFriendId"
          @referFriendClose="referFriendClose"
          ref="referFriendChat"
        ></ReferFriend>
      </el-dialog>
    </div>

    <!-- 视频通话弹窗 -->
    <AudioPopUps
      v-if="dialogVisibleVideo"
      :pop-width="700"
      :full-screen-icon="true"
      :btn-show="false"
      title="视频通话"
      @closePop="dialogVisibleVideo = false"
    >
      <div>
        <VideoCalls
          v-if="dialogVisibleVideo"
          @clearVideoTimer="clearVideoTimer"
          @closeVideo="closeVideo"
          :friendItem="friendMessage"
          ref="videoCalls"
        />
      </div>
    </AudioPopUps>

    <!-- 语音通话弹窗 -->
    <AudioPopUps
      v-if="dialogVisibleVoice"
      :pop-width="700"
      :full-screen-icon="false"
      :btn-show="false"
      title="语音通话"
      @closePop="dialogVisibleVoice = false"
    >
      <div>
        <VoiceCalls
          v-if="dialogVisibleVoice"
          @clearVoiceTimer="clearVoiceTimer"
          @closeVoice="closeVoice"
          :friendItem="friendMessage"
          ref="voiceCalls"
        />
      </div>
    </AudioPopUps>

    <!-- 请求添加好友对话框 -->
    <div>
      <el-dialog width="400px" :visible.sync="addFriendView" append-to-body class="custom-dialog">
        <div class="add-friend-content">
          <div class="personal">
            <el-image
              v-if="searchResult.avatar"
              class="avatar-large"
              :src="searchResult.avatar"
              :alt="searchResult.nickName"
            ></el-image>
            <div class="base-content" v-else>
              <div class="default-avatar">
                <i class="el-icon-user"></i>
              </div>
            </div>

            <div class="base-content">
              <div class="flex-row">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="searchResult.nickName"
                  placement="bottom"
                >
                  <p class="nick-name">{{ searchResult.nickName }}</p>
                </el-tooltip>&nbsp;
                <span
                  :class="{
                    man: searchResult.gender === 1,
                    woman: searchResult.gender === 0,
                  }"
                >
                  <i class="el-icon-s-custom"></i>
                </span>
              </div>
              <el-tooltip
                class="item"
                effect="dark"
                :content="searchResult.username"
                placement="bottom"
              >
                <p class="login-name">
                  <span>登入名:</span>
                  <span>{{ searchResult.username || "未知" }}</span>
                </p>
              </el-tooltip>
            </div>
          </div>

          <div class="add-actions">
            <el-button v-if="searchResult.isFriend === 0" type="info" disabled>正在申请</el-button>
            <el-button
              @click.prevent="innerVisible = false"
              v-else-if="
                searchResult.isFriend === 1 || searchResult.isFriend === 3
              "
              type="primary"
            >发消息</el-button>
            <div v-else>
              <el-input
                size="mini"
                v-model="sendMessage.content"
                class="custom-input"
                maxlength="30"
                placeholder="输入留言"
              ></el-input>
              <el-button
                class="margin-top-10"
                @click="addFriend(searchResult.userInfoId)"
                type="success"
              >添加为好友</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Complaints from "./Complaints";
import ReferFriend from "./ReferFriend";
import service from "../../utils/request";
import { getToken } from "../../utils/auth";
import AudioPopUps from "../PopUps/AudioPopUps.vue";
import { asidefriend } from "../../listening/asidefriend";
import VideoCalls from "./VideoCalls";
import VoiceCalls from "./VoiceCalls";
import { socket } from "../../config/websocket/socket";
import PrecisionSearch from "./PrecisionSearch";
// 常量定义 - 提高代码可读性
const CALL_TYPES = {
  VOICE: {
    action: 10008,
    dialog: "dialogVisibleVoice",
    timer: "voiceCountdownTimer"
  },
  VIDEO: {
    action: 10007,
    dialog: "dialogVisibleVideo",
    timer: "videoCountdownTimer"
  }
};
export default {
  name: "FriendDetail",
  components: {
    VideoCalls,
    VoiceCalls,
    Complaints,
    AudioPopUps,
    ReferFriend,
    PrecisionSearch
  },
  props: {
    select: {
      type: Number
    }
  },
  data() {
    return {
      searchResult: {},
      videoCountdownTimer: null,
      voiceCountdownTimer: null,
      dialogVisibleVoice: false,
      dialogVisibleVideo: false,
      poolClickView: false,
      addFriendView: false,
      px: 0,
      py: 0,
      x: 0, // 浮动窗口的X坐标
      y: 0, // 浮动窗口的Y坐标
      editShow1: false,
      editShow2: false,
      editShow3: false,
      friendMessage: {},
      friendMessageIsNull: null, // null:加载中, true:非好友, false:是好友
      recommendFriendId: null,
      referFriendVisible: false,
      complaintsVisible: false,
      labelOptions: [],
      form: {
        friendId: "",
        remark: "",
        label: [],
        description: ""
      },
      leftClickView: false,
      remarkView: false,
      searchUserId: "",
      endFlag: false,
      flag: false,
      sendMessage: {
        action: 0,
        token: getToken(),
        receiverId: "",
        content: "你好",
        extend: 1
      }
    };
  },
  created() {
    // 可以在这里初始化数据
  },
  mounted() {
    window.addEventListener("videoCallsResponse", this.videoCallsResponse);
    window.addEventListener("voiceCallsResponse", this.voiceCallsResponse);
    
    // 保存事件处理函数的引用，确保能正确移除监听器
    this.clickHandler = (event) => {
      this.hideFloatWindow(event);
    };
    document.addEventListener("click", this.clickHandler);
  },
  beforeDestroy() {
    // 移除事件监听，防止内存泄漏
    window.removeEventListener("videoCallsResponse", this.videoCallsResponse);
    window.removeEventListener("voiceCallsResponse", this.voiceCallsResponse);
    
    // 正确移除事件监听器，使用保存的引用
    if (this.clickHandler) {
      document.removeEventListener("click", this.clickHandler);
      this.clickHandler = null;
    }

    // 清除定时器
    this.clearVoiceTimer();
    this.clearVideoTimer();
    
    // 清理数据引用，防止内存泄漏
    this.friendMessage = {};
    this.searchResult = {};
    this.form = {};
    this.labelOptions = [];
    
    // 清理Vuex相关引用
    this.$store = null;
  },
  methods: {
    /**
     * 统一处理语音/视频通话
     * @param {String} type 通话类型: 'voice' 或 'video'
     */
    startCall(type) {
      const callConfig = CALL_TYPES[type.toUpperCase()];
      if (!callConfig) return;

      const friendId = this.friendMessage.friendId;
      const loading = this.$loading({
        lock: true,
        text: "建立通信中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      setTimeout(() => {
        loading.close();
        service({
          method: "get",
          url: "users/userInfo/userOnlineStatus",
          params: { userInfo: friendId }
        })
          .then(res => {
            if (res && res.code === 200) {
              if (res.data === true) {
                this.sendMessage.action = callConfig.action;
                this.sendMessage.receiverId = friendId;
                socket.send(this.sendMessage);

                // 显示对应的通话窗口
                this[callConfig.dialog] = true;

                // 设置超时定时器
                this[callConfig.timer] = setTimeout(() => {
                  this.$refs[`${type}Calls`].closeCall(friendId);
                }, 10 * 1000);
              } else {
                this.$notify({
                  title: `${type === "voice" ? "语音" : "视频"}通话`,
                  type: "warning",
                  message: `对方不在线，无法进行${
                    type === "voice" ? "语音" : "视频"
                  }通话`
                });
              }
            }
          })
          .catch(error => {
            this.$notify({
              title: "错误",
              type: "error",
              message: "获取用户状态失败"
            });
            console.error("获取用户在线状态失败:", error);
          });
      }, 2000);
    },

    clearVoiceTimer() {
      if (this.voiceCountdownTimer) {
        clearTimeout(this.voiceCountdownTimer);
        this.voiceCountdownTimer = null;
      }
    },

    clearVideoTimer() {
      if (this.videoCountdownTimer) {
        clearTimeout(this.videoCountdownTimer);
        this.videoCountdownTimer = null;
      }
    },

    closeVideo(message) {
      this.clearVideoTimer();
      this.dialogVisibleVideo = false;
      this.$notify({
        title: "视频通话",
        type: "warning",
        message: message
      });
    },

    closeVoice(message) {
      this.clearVoiceTimer();
      if (this.dialogVisibleVoice) {
        this.dialogVisibleVoice = false;
        this.$notify({
          title: "语音通话",
          type: "warning",
          message: message || "语音通话中断"
        });
      }
    },

    videoCallsResponse(event) {
      if (this.select === 2) {
        this.dialogVisibleVideo = true;
        this.$nextTick(() => {
          this.$refs.videoCalls.VCResponse(event.detail.data);
        });
      }
    },

    voiceCallsResponse(event) {
      if (this.select === 2) {
        this.dialogVisibleVoice = true;
        this.$nextTick(() => {
          this.$refs.voiceCalls.voiceResponse(event.detail.data);
        });
      }
    },

    friendMessageItem(friendId) {
      this.friendMessageIsNull = null;
      this.searchUserId = friendId;
      this.friendMessage = {};

      service({
        method: "get",
        url: "/users/getFriendById",
        params: { friendId }
      })
        .then(res => {
          this.friendMessage = res.data;
          this.friendMessageIsNull = false;
        })
        .catch(error => {
          console.error("获取好友信息失败:", error);
          this.friendMessageIsNull = true;
        });
    },

    sendMsg(friendItem) {
      // 构造ChatList期望的数据结构
      const chatData = {
        id: friendItem.friendId || friendItem.id,
        targetId: friendItem.friendId || friendItem.targetId,
        displayName: friendItem.remark || friendItem.nickName || friendItem.displayName,
        chatType: 1, // 1表示好友聊天
        groupChatCount: 0,
        friendId: friendItem.friendId || friendItem.id,
        userInfoId: friendItem.userInfoId,
        avatar: friendItem.avatar,
        isOnline: friendItem.isOnline || 0
      };
      this.$emit("chatView", chatData);
    },

    /**
     * 简化鼠标进入事件处理
     */
    handleMouseEnter(position) {
      this[`editShow${position}`] = true;
    },

    /**
     * 简化鼠标离开事件处理
     */
    handleMouseLeave(position) {
      this[`editShow${position}`] = false;
    },

    /**
     * 统一打开备注对话框的方法，消除代码重复
     */
    openRemarkDialog() {
      service({
        method: "get",
        url: "users/getUserLabelList"
      })
        .then(res => {
          this.labelOptions = res.data;
          this.form.friendId = this.friendMessage.friendId;
          this.form.remark = this.friendMessage.remark;

          if (this.friendMessage.label) {
            this.form.label = this.friendMessage.label.split(",");
          } else {
            this.form.label = [];
          }

          this.form.description = this.friendMessage.description;
          this.flag = true;
          this.remarkView = true;
        })
        .catch(error => {
          console.error("获取标签列表失败:", error);
          this.$notify({
            title: "错误",
            type: "error",
            message: "加载标签失败"
          });
        });
    },

    poolClick(friendId, event) {
      if (event.button === 0) {
        this.poolClickView = true;
        this.px = event.clientX;
        this.py = event.clientY;
      }
    },

    recommend(friendMessage) {
      this.recommendFriendId = Number(friendMessage);
      this.poolClickView = false;
      this.leftClickView = false;
      this.referFriendVisible = true;
      this.$nextTick(() => {
        this.$refs.referFriendChat.init();
      });
    },

    // 设置星标
    setFriendStar(isStar) {
      service({
        method: "put",
        url: "users/updateStar",
        params: {
          twoUserId: this.searchUserId,
          isStar
        }
      })
        .then(res => {
          if (res.code === 200) {
            this.poolClickView = false;
            this.friendMessage.isStar = isStar;
            this.$notify({
              title: "成功",
              message: "星标操作成功",
              type: "success"
            });

            window.dispatchEvent(
              new CustomEvent("listeningStar", {
                detail: {
                  data: { friendId: this.searchUserId, isStar }
                }
              })
            );
          }
        })
        .catch(error => {
          console.error("设置星标失败:", error);
          this.$notify({
            title: "错误",
            type: "error",
            message: "星标操作失败"
          });
        });
    },

    addBlacklist(friendId) {
      this.flag = true;
      this.$confirm(
        "加入黑名单，你将不再收到对方的消息，并且你们互相看不到对方朋友圈的更新",
        "加入黑名单",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "my-dialog"
        }
      )
        .then(() => {
          service({
            method: "put",
            url: `users/addBlacklist/${friendId}`
          })
            .then(res => {
              if (res.code === 200) {
                this.flag = false;
                this.poolClickView = false;
                this.leftClickView = false;
                this.$emit("initFriendDetailId");

                window.dispatchEvent(
                  new CustomEvent("delFriendNotice", {
                    detail: { data: friendId }
                  })
                );

                this.$notify({
                  title: "加入黑名单",
                  type: "success",
                  message: "已加入黑名单"
                });
              }
            })
            .catch(error => {
              console.error("加入黑名单失败:", error);
              this.flag = false;
              this.$notify({
                title: "错误",
                type: "error",
                message: "加入黑名单失败"
              });
            });
        })
        .catch(() => {
          this.flag = false;
        });
    },

    complaints(friend) {
      this.poolClickView = false;
      this.leftClickView = false;
      this.complaintsVisible = true;
      this.$nextTick(() => {
        this.$refs.complaints.initData(friend);
      });
    },

    delFriend(friendId) {
      this.$confirm(
        `将联系人‘${this.friendMessage.remark}’删除,将同时删除与该联系人的聊天记录`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          service({
            method: "delete",
            url: "users/delete/friend",
            params: { friendId }
          })
            .then(res => {
              if (res && res.code === 200) {
                this.poolClickView = false;
                this.leftClickView = false;

                window.dispatchEvent(
                  new CustomEvent("delFriendNotice", {
                    detail: { data: friendId }
                  })
                );
              }
            })
            .catch(error => {
              console.error("删除好友失败:", error);
              this.$notify({
                title: "错误",
                type: "error",
                message: "删除联系人失败"
              });
            });
        })
        .catch(() => {});
    },

    hideFloatWindow(event) {
      const lx = Number(event.clientX);
      const ly = Number(event.clientY);

      if (!this.flag) {
        // 简化浮层隐藏逻辑
        const isOutsidePool =
          lx - this.px > 151 ||
          lx < this.px ||
          ly - this.py > 164 ||
          ly < this.py;

        const isOutsideLeft =
          lx - this.x > 300 || lx < this.x || ly - this.y > 315 || ly < this.y;

        if (isOutsidePool) {
          this.poolClickView = false;
        }

        if (isOutsideLeft && !this.poolClickView) {
          this.leftClickView = false;
        }
      }
    },

    sendFriendCheck() {
      const loading = this.$loading({
        lock: true,
        text: "加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.1)"
      });

      service({
        method: "get",
        url: `users/getUserById/${this.searchUserId}`
      })
        .then(res => {
          loading.close();
          if (res.data && res.data.userInfoId !== null) {
            this.addFriendView = true;
            this.searchResult = res.data;
          } else {
            this.$notify({
              title: "查找用户",
              type: "error",
              message: "找不到该用户"
            });
          }
        })
        .catch(error => {
          loading.close();
          console.error("查找用户失败:", error);
          this.$notify({
            title: "错误",
            type: "error",
            message: "查找用户失败"
          });
        });
    },

    addFriend(friendId) {
      this.sendMessage.receiverId = friendId;
      this.sendMessage.action = 10004;
      socket.send(this.sendMessage);

      this.$notify({
        type: "success",
        title: "添加好友",
        message: "已申请添加"
      });

      this.addFriendView = false;
    },

    cancelConfirmUpdate() {
      this.remarkView = false;
      this.flag = false;
    },

    confirmUpdate() {
      if (!this.form.label || this.form.label.length <= 0) {
        this.form.label = [];
      }

      service({
        method: "post",
        url: "users/updateFriendDetail",
        data: this.form
      })
        .then(res => {
          if (res.code === 200) {
            this.remarkView = false;
            this.flag = false;
            this.friendMessage = res.data;
            asidefriend.updateRemark(res.data);
          }
        })
        .catch(error => {
          console.error("更新好友信息失败:", error);
          this.remarkView = false;
          this.flag = false;
          this.$notify({
            title: "错误",
            type: "error",
            message: "更新信息失败"
          });
        });
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.remarkView = false;
          this.flag = false;
          done && done();
        })
        .catch(_ => {});
    },

    referFriendClose() {
      this.$refs.referFriendChat.clearCacheAndClose();
      this.referFriendVisible = false;
    },

    complaintsFinish() {
      this.complaintsVisible = false;
    },

    complaintsHandleClose() {
      this.$confirm("确认关闭投诉页？")
        .then(_ => {
          this.$refs.complaints.clearCacheAndClose();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style scoped>
.main {
  width: 100%;
  /* min-height: 100vh; */
  display: flex;
  justify-content: center;
  /* padding: 20px; */
  background-color: #f5f7fa;
}

.container {
  /* margin-top: 30px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 50px;
  width: 100%;
  max-width: 500px;
}

/* 卡片样式 */
.card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 15px;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* 顶部信息区域 */
.upper-part {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid #f0f2f5;
}

.message {
  line-height: 1.5em;
  margin-left: 15px;
  flex: 1;
}

.name-section {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.name {
  font-size: 18px;
  font-weight: 600;
  color: #1d2129;
}

.name-actions {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.star-icon {
  color: #ffc300;
  font-size: 18px;
  margin-left: 5px;
}

.base-info {
  font-size: 13px;
  color: #666;
}

.base-info .label {
  color: #999;
  margin-right: 5px;
}

.tool-icon {
  margin-left: auto;
  color: #999999;
  padding: 5px;
}

.tool-icon .tool {
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.tool-icon .tool:hover {
  background-color: #f0f2f5;
  cursor: pointer;
}

/* 中间信息区域 */
.medium-part {
  display: flex;
  flex-direction: column;
  line-height: 2em;
}

.info-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .item-name {
  cursor: default;
  width: 80px;
  color: #86909c;
  flex-shrink: 0;
}

.text-ellipsis {
  flex: 1;
  margin: 0;
  color: #1d2129;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.edit-icon {
  color: #409eff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.info-item:hover .edit-icon {
  opacity: 1;
}

/* 底部操作区域 */
.bottom-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.action-button {
  margin: 0 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #4e5969;
  transition: all 0.2s;
  padding: 8px 12px;
  border-radius: 8px;
}

.action-button:hover {
  background-color: #f0f2f5;
  color: #409eff;
  transform: translateY(-2px);
}

.action-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.action-text {
  font-size: 14px;
}

/* 非好友状态样式 */
.non-friend-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 30px 20px;
  text-align: center;
}

.empty-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f0f2f5;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #86909c;
}

.non-friend-message {
  font-size: 16px;
  color: #1d2129;
  margin-bottom: 20px;
  line-height: 1.5;
}

.add-friend-btn {
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #409eff;
  transition: all 0.2s;
  margin-bottom: 20px;
}

.add-friend-btn:hover {
  background-color: #409eff;
  color: white;
}

.tips {
  color: #86909c;
  font-size: 13px;
  text-align: left;
  line-height: 1.6;
  padding: 0 10px;
}

.tips-title {
  font-weight: 600;
}

.tips-list {
  margin: 8px 0 0 20px;
  padding: 0;
}

/* 加载状态样式 */
.loading-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-text {
  margin-top: 15px;
  color: #86909c;
  font-size: 14px;
}

/* 浮层菜单样式 */
.pool-float-window {
  position: absolute;
  z-index: 1001;
  background-color: #fefefe;
  border-radius: 8px;
  border: 1px solid #ebebeb;
  color: #1d2129;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.pool-float-window .opear {
  font-size: 14px;
}

.pool-float-window .opear .detail {
  padding: 10px 20px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pool-float-window .opear .detail:hover {
  background-color: #f5f7fa;
}

.danger {
  color: #f53f3f;
}

/* 对话框样式 */
.custom-dialog {
  border-radius: 12px;
}

.custom-dialog /deep/ .el-dialog__header {
  padding: 18px 20px 10px;
}

.custom-dialog /deep/ .el-dialog__title {
  font-size: 16px;
  font-weight: 600;
}

.custom-dialog /deep/ .el-dialog__body {
  padding: 20px;
}

.custom-dialog /deep/ .el-dialog__footer {
  padding: 10px 20px 18px;
  border-top: 1px solid #f5f5f5;
}

/* 添加好友对话框内容 */
.add-friend-content {
  padding: 10px 0;
}

.personal {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #f5f5f5;
}

.default-avatar {
  width: 75px;
  height: 75px;
  border-radius: 10px;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #86909c;
}

.personal .login-name {
  margin-top: 5px;
  color: #86909c;
  font-size: 13px;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.personal .nick-name {
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.personal .base-content {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  color: #1d2129;
  margin-left: 10px;
}

.man {
  color: #409eff;
}

.woman {
  color: #f38098;
}

.add-actions {
  text-align: center;
  margin-top: 20px;
}

/* 自定义分隔线 */
.custom-divider {
  margin: 0;
  background-color: #f5f5f5;
}

/* 表单样式调整 */
.form span {
  color: #86909c;
}

.form /deep/ .el-form-item__label {
  line-height: 1;
  margin-bottom: 8px;
  font-weight: 500;
}

/* 自定义输入框 */
.custom-input /deep/ .el-input__inner {
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  transition: border-color 0.2s;
}

.custom-input /deep/ .el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 性别图标 */
.man i,
.woman i {
  font-size: 16px;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card,
.non-friend-card,
.bottom-actions {
  animation: fadeIn 0.3s ease-out forwards;
}

/* 提取的内联样式 */
.border-bottom-light {
  border-bottom: 1px solid #e1e1e1;
}

.full-width {
  width: 100%;
}

.avatar-large {
  width: 75px;
  height: 75px;
  border-radius: 10px;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.margin-top-10 {
  margin-top: 10px;
}
</style>
